<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
    <style>
      .btn-link {
        text-decoration: none;
      }

      /* .card {
        width: 300px;
      } */
    </style>
  </head>
  <body>
    <nav class="navbar bg-danger-subtle navbar-expand-sm">
      <div class="container-fluid">
        <a href="#">
          <img src="./logo.png" alt="logo" />
        </a>

        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          展开
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a href="#" class="nav-link active">中文文档</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">示例</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">精选模板</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">官方仓库</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="p-4">
      <!-- https://v5.bootcss.com/docs/content/tables/ -->
      <table class="table border table-hover table-striped">
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>爱好</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="table-success">1</td>
            <td>张三</td>
            <td>男</td>
            <td class="table-warning">法外狂徒</td>
          </tr>
          <tr>
            <td>2</td>
            <td>ikun</td>
            <td>男</td>
            <td>唱跳rap篮球唱跳rap篮球唱跳</td>
          </tr>
          <tr>
            <td>3</td>
            <td>马保国</td>
            <td>男</td>
            <td>闪电五连鞭闪电五连鞭闪电五连鞭闪电五连鞭闪电五连鞭</td>
          </tr>
        </tbody>
      </table>

      <button class="btn btn-primary">按钮</button>
      <button class="btn btn-primary rounded-pill">按钮</button>
      <button class="btn btn-link">链接</button>

      <div class="container-fluid">
        <div class="row">
          <div class="card col mx-2">
            <img src="./img.jpg" class="card-img-top" alt="img" />
            <div class="card-body">
              <h5 class="card-title">BootStrap</h5>
              <p class="card-text">一个用来做响应式布局的框架</p>
            </div>
          </div>
          <div class="card col mx-2">
            <img src="./img.jpg" class="card-img-top" alt="img" />
            <div class="card-body">
              <h5 class="card-title">BootStrap</h5>
              <p class="card-text">一个用来做响应式布局的框架</p>
            </div>
          </div>
          <div class="card col mx-2">
            <img src="./img.jpg" class="card-img-top" alt="img" />
            <div class="card-body">
              <h5 class="card-title">BootStrap</h5>
              <p class="card-text">一个用来做响应式布局的框架</p>
            </div>
          </div>
          <div class="card col mx-2">
            <img src="./img.jpg" class="card-img-top" alt="img" />
            <div class="card-body">
              <h5 class="card-title">BootStrap</h5>
              <p class="card-text">一个用来做响应式布局的框架</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./bootstrap/bootstrap.bundle.min.js"></script>
  </body>
</html>
